import * as echarts from 'echarts';
import NProgress from 'nprogress';
// import { getSidebar } from '@/utils/utils';
import Cookies from 'js-cookie';
// import { mapGetters, mapMutations } from 'vuex'
export const syshome = {
    data() {
        return {}
    },
    watch: {
        $route: {
            deep: true,
            immediate: true,
            handler(a, b) {
                console.log(a, b)
                if (a.name === 'QukuSurvey') {
                    // if (Object.prototype.toString.call(this.sidebarData) === '[object Array]' && this.sidebarData.length === 0) {
                    //     if (Cookies.get('access_token') || Cookies.get('refresh_token')) {
                    //         // this.init();
                    //         this.$getSidebar.call(this)
                    //     } else {
                    //         // this.sidebarData = [];
                    //         this.SET_SLIDEBAR_DATA([]);
                    //     }
                    // }


                    this.city();
                    if (this.cards[0] === true) {
                        if (this.newSongExpressData.length === 0) {

                            // this.drawAll()
                            this.getNewSongExpressData()
                        }

                        if (Object.keys(this.surveyData).length === 0) {
                            this.getSurveyData()
                        }

                    } else if (this.cards[1] === true) {
                        if (this.top300SongListData.length === 0) {
                            this.getTop300SongListData()
                        }

                        if (this.top10000SongsData.length === 0) {
                            this.getTop10000SongsData()
                        }
                    } else if (this.cards[2] === true) {
                        if (this.auditOverviewData.length === 0) {
                            // 歌单审核概况
                            this.getAuditOverviewData()
                        }
                        if (this.auditOverviewData_.length === 0) {
                            // 曲库审核概况
                            this.getAuditOverviewData_()
                        }
                    } else if (this.cards[3] === true) {
                        if (this.workLogData.length === 0) {
                            this.getWorkLogData()
                        }
                    } else if (this.cards[4] === true) {
                        if (this.userFeedBackData.length === 0) {
                            this.getUserFeedBackData()
                        }
                    }
                }
            }
        }
    },
    mounted() {},
    methods: {
        // TOP300 歌单 暂时无接口
        async getTop300SongListData() {
            console.log('发送请求。。。')
        },
        // TOP10000 歌曲
        async getTop10000SongsData() {
            try {
                NProgress.start()
                const url = '/index/operationdata'
                const { data: res } = await this.$http[0].get(url, {
                    params: {

                    }
                })
                console.log(res)
                if (res.code != '0000') {
                    throw new Error(res.message);
                }


                if (res.data.songTop10000 && res.data.songTop10000.length > 0) {
                    this.SET_TEMP_DATA(res.data.songTop10000)

                    this.SET_TOP10000_SONGS_DATA(this.tempData.slice(this.top10000SongsQuery.pageIndex, this.top10000SongsQuery.pageSize))
                    this.SET_SONG_LIST_STATISTICS_DATA({
                        notreviewedCount: res.data.notreviewedCount,
                        offlineCount: res.data.offlineCount,
                        onlineCount: res.data.onlineCount,
                        playlistCount: res.data.playlistCount,
                        yesterdayCount: res.data.yesterdayCount,
                    })
                    this.SET_TOP10000_SONGS_PAGETOTAL(this.tempData.length)
                } else {
                    res.data.songTop10000 = []
                    this.SET_TOP10000_SONGS_DATA([])
                    this.SET_SONG_LIST_STATISTICS_DATA({})
                    this.SET_TOP10000_SONGS_PAGETOTAL(0)
                }

                NProgress.done();
            } catch (err) {
                console.dir(err)
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
                NProgress.done();
            }
        },

        // 歌单审核概况
        async getAuditOverviewData() {
            try {
                NProgress.start()
                this.disabled = true;
                const url = '/auditlogs/list'
                const { data: res } = await this.$http[2].get(url, {

                    params: this.$removeField({
                        page: this.auditOverviewQuery.pageIndex,
                        size: this.auditOverviewQuery.pageSize,
                        // id: this.auditOverviewQuery.id,
                        type: this.auditOverviewQuery.type,
                        name: this.auditOverviewQuery.name,
                        auditBy: this.auditOverviewQuery.auditBy,
                        ids: this.auditOverviewQuery.ids,
                        currName: localStorage.getItem('ms_username')
                    })
                })
                console.log(res)
                if (res.code != '0000') {
                    throw new Error(res.message);
                }

                if (res.data.content && res.data.content.length > 0) {
                    res.data.content.map(item => {
                        item.auditTime = this.$dateFormat(item.auditTime, 'yyyy-mm-dd', '-');
                    });
                    this.SET_AUDIT_OVERVIEW_DATA(res.data.content)
                    this.SET_AUDIT_OVERVIEW_PAGETOTAL(res.data.totalElements)
                } else {
                    this.SET_AUDIT_OVERVIEW_DATA([])
                    this.SET_AUDIT_OVERVIEW_PAGETOTAL(0)
                }
                NProgress.done();
                this.disabled = false;
            } catch (err) {
                console.dir(err)
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
                NProgress.done();
                this.disabled = false;
            }
        },

        //  曲库审核概况
        async getAuditOverviewData_() {
            try {
                NProgress.start()
                this.disabled = true;
                const url = '/lib/list'
                const { data: res } = await this.$http[0].get(url, {

                    params: this.$removeField({
                        page: this.auditOverviewQuery_.pageIndex,
                        size: this.auditOverviewQuery_.pageSize,
                        // id: this.auditOverviewQuery_.id,
                        // type: this.auditOverviewQuery_.type,
                        name: this.auditOverviewQuery_.name,
                        auditBy: this.auditOverviewQuery_.auditBy,
                        auditResult: this.auditOverviewQuery_.auditResult,
                        // ids: this.auditOverviewQuery_.ids,
                        currName: localStorage.getItem('ms_username'),

                    })
                })
                console.log(res)
                if (res.code != '0000') {
                    throw new Error(res.message);
                }

                if (res.data.content && res.data.content.length > 0) {
                    res.data.content.map(item => {
                        item.auditTime = this.$dateFormat(item.auditTime, 'yyyy-mm-dd', '-');
                    });
                    this.SET_AUDIT_OVERVIEW_DATA_(res.data.content)
                    this.SET_AUDIT_OVERVIEW_PAGETOTAL_(res.data.totalElements)
                } else {
                    this.SET_AUDIT_OVERVIEW_DATA_([])
                    this.SET_AUDIT_OVERVIEW_PAGETOTAL_(0)
                }
                NProgress.done();
                this.disabled = false;
            } catch (err) {
                console.dir(err)
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
                NProgress.done();
                this.disabled = false;
            }
        },
        // 工作日志
        async getWorkLogData() {
            try {
                NProgress.start()
                this.disabled = true;
                const url = '/index/worklogs'


                const { data: res } = await this.$http[0].get(url, {
                    params: this.$removeField({
                        page: this.workLogQuery.pageIndex,
                        size: this.workLogQuery.pageSize,
                        operators: this.workLogQuery.operators,
                        ids: this.workLogQuery.ids,
                        startDate: this.workLogQuery.timeDate ? this.$standardDateToTimstamp(this.workLogQuery.timeDate[0]) : null,
                        endDate: this.workLogQuery.timeDate ? this.$standardDateToTimstamp(this.workLogQuery.timeDate[1]) : null
                    })
                })
                console.log(res)
                if (res.code != '0000') {
                    throw new Error(res.message);
                }
                if (res.data.content && res.data.content.length > 0) {
                    res.data.content.map(item => {
                        item.playlistEditCount = item.playlistEditCount == undefined ?
                            0 : item.playlistEditCount;
                        item.songEditCount = item.songEditCount == undefined ?
                            0 : item.songEditCount

                        item.actorEditCount = item.actorEditCount == undefined ? 0 : item.actorEditCount
                        item.albumEditCount = item.albumEditCount == undefined ? 0 : item.albumEditCount

                        item.taggingCount = item.taggingCount == undefined ? 0 : item.taggingCount

                        item.total = item.playlistEditCount + item.songEditCount + item.actorEditCount + item.albumEditCount + item.taggingCount
                    })
                    this.SET_WORK_LOG_DATA(res.data.content)
                    this.SET_WORK_LOG_PAGETOTAL(res.data.totalElements)
                } else {
                    this.SET_WORK_LOG_DATA([])
                    this.SET_WORK_LOG_PAGETOTAL(0)
                }
                NProgress.done();
                this.disabled = false;
            } catch (err) {
                console.dir(err)
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
                NProgress.done();
                this.disabled = false;
            }
        },

        // 用户反馈
        async getUserFeedBackData() {
            try {
                NProgress.start()
                const url = '/index/feedback'
                const { data: res } = await this.$http[0].get(url, {
                    params: this.$removeField({
                        page: this.userFeedBackQuery.pageIndex,
                        size: this.userFeedBackQuery.pageSize,
                        channel: this.userFeedBackQuery.channel,
                        brand: this.userFeedBackQuery.brand,
                        model: this.userFeedBackQuery.model

                    })
                })
                console.log(res)
                if (res.code != '0000') {
                    throw new Error(res.message);
                }
                if (res.data.content && res.data.content.length > 0) {
                    res.data.content.map(item => {
                        item.createTime = this.$dateFormat(item.createTime, '', '-')
                    })
                    this.SET_USER_FEEDBACK_DATA(res.data.content)
                    this.SET_USER_FEEDBACK_PAGETOTAL(res.data.totalElements)
                } else {
                    this.SET_USER_FEEDBACK_DATA([])
                    this.SET_USER_FEEDBACK_PAGETOTAL(0)
                }
                NProgress.done();
            } catch (err) {
                this.SET_USER_FEEDBACK_DATA([])
                this.SET_USER_FEEDBACK_PAGETOTAL(0)
                console.dir(err)
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
                NProgress.done();
            }
        },
        // 新歌速递
        async getNewSongExpressData() {
            try {
                NProgress.start()
                const url = '/index/newsongs'
                const { data: res } = await this.$http[0].get(url, {
                    params: this.$removeField({
                        day: this.newSongExpressQuery.day,
                        page: this.newSongExpressQuery.pageIndex,
                        size: this.newSongExpressQuery.pageSize
                    })
                })
                console.log(res)
                if (res.code === '3002') {
                    return;
                }
                if (res.code != '0000') {
                    throw new Error(res.message);
                }
                if (res.data.content && res.data.content.length > 0) {
                    res.data.content.map(item => {
                        item.offlineTime = this.$dateFormat(item.offlineTime, 'yyyy-mm-dd', '-');
                        item.onlineTime = this.$dateFormat(item.onlineTime, 'yyyy-mm-dd', '-');

                    });
                    this.SET_NEW_SONG_EXPRESS_DATA(res.data.content)
                    this.SET_NEW_SONG_EXPRESS_PAGETOTAL(res.data.totalElements)
                } else {
                    this.SET_NEW_SONG_EXPRESS_DATA([])
                    this.SET_NEW_SONG_EXPRESS_PAGETOTAL(0)
                }

                // this.SET_QUKUSURVEY_DATA(res.data)
                // this.drawAll()
                NProgress.done();
            } catch (err) {
                this.SET_NEW_SONG_EXPRESS_DATA([])
                this.SET_NEW_SONG_EXPRESS_PAGETOTAL(0)
                console.dir(err)
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
                NProgress.done();
            }
        },
        drawAll() {
            this.$nextTick(() => {
                try {
                    // CP曲库占比
                    this.drawPie();
                    // 入库趋势图
                    this.drawHistogram();
                    // 热门歌手top100
                    this.drawHotSinger();
                    // 热门歌曲top500
                    this.drawHotSong();
                } catch (err) {
                    console.dir(err)
                }

            });
        },
        async getSurveyData() {
            try {
                NProgress.start()
                const url = '/index/liboverview'
                const { data: res } = await this.$http[0].get(url, {

                })
                console.log(res)
                if (res.code != '0000') {
                    throw new Error(res.message);
                }
                this.SET_QUKUSURVEY_DATA(res.data)
                this.drawAll()
                NProgress.done();
            } catch (err) {
                console.dir(err)
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
                NProgress.done();
            }
        },
        dataFormat(data) {
            data = data.filter(item => item)
            if (data && data.length > 0) {
                data = data.filter((item) => {
                    return parseFloat(item.proportion) != 0;
                })
                for (var i = 0; i < data.length; i++) {
                    if (data[i].cpName) {
                        // 什么都不做
                        // data[i].cpName = data[i].cpName.length <= 3 ? data[i].cpName : data[i].cpName.slice(0, 3) + '...'
                    } else {
                        data.splice(i, 1)
                    }
                }

                // 降序
                data.sort((a, b) => {
                    return b.proportion - a.proportion;
                })
                if (data.length <= 6) {
                    return data.map(item => {
                        return {
                            name: item.cpName,
                            value: item.proportion
                        }
                    })
                } else {
                    var ret = [...data.splice(0, 5).map(item => {
                            return {
                                // name: item.cpName.length <= 3 ? item.cpName : item.cpName.slice(0, 3) + '...',
                                name: item.cpName,
                                value: item.proportion
                            }
                        }), this.restFormat(data)]
                        // console.log('饼图数据', ret)
                    return ret
                }
            } else {
                return []
            }
        },
        restFormat(data) {
            var sum = 0;
            for (var i = 0; i < data.length; i++) {
                sum += parseFloat(data[i].proportion)
            }
            return {
                name: '其他',
                value: sum
            }
        },
        dataFormat_(data) {
            data = this.dataFormat(data)
            return data.map(item => item.name)
        },
        // ====================================热门歌曲top500========================================
        drawHotSong() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('_song'));

            // 指定图表的配置项和数据
            var option = {
                dataZoom: [{
                    id: 'dataZoomX',
                    type: 'slider',
                    xAxisIndex: [0],
                    filterMode: 'filter',
                    start: 0, //数据窗口范围的起始百分比0-100
                    // end: 2,
                    end: (1000 / this.surveyData.popularSong.map(item => item.songName).length) * 0.9,
                    bottom: 0 //距离底部的距离
                }, ],
                //--------------    标题 title  ----------------
                title: {
                    text: '热门歌曲top500',
                    show: true,
                    x: 'center',
                    y: '15',
                    textStyle: {
                        //---主标题内容样式
                        color: '#000',
                        fontSize: 14,
                    }
                },
                //--------------   提示框 -----------------
                tooltip: {
                    show: true, //---是否显示提示框,默认为true
                    trigger: 'item', //---数据项图形触发
                    axisPointer: {
                        //---指示样式
                        type: 'shadow',
                        axis: 'auto'
                    },
                    padding: 5,
                    textStyle: {
                        //---提示框内容样式
                        color: '#909399',
                    }
                },

                //-------------  grid区域  ----------------
                grid: {
                    show: false, //---是否显示直角坐标系网格
                    top: 80, //---相对位置，top\bottom\left\right
                    bottom: 45,
                    containLabel: false, //---grid 区域是否包含坐标轴的刻度标签
                    tooltip: {
                        //---鼠标焦点放在图形上，产生的提示框
                        show: true,
                        trigger: 'item', //---触发类型
                        textStyle: {
                            color: '#909399',
                        }
                    }
                },

                //-------------   x轴   -------------------
                xAxis: {
                    show: true, //---是否显示
                    position: 'bottom', //---x轴位置
                    offset: 0, //---x轴相对于默认位置的偏移
                    type: 'category', //---轴类型，默认'category'
                    name: '歌名', //---轴名称
                    nameLocation: 'end', //---轴名称相对位置
                    // textStyle: {
                    //     fontSize: 15,
                    //     color: '#fff'
                    // },
                    nameTextStyle: {
                        //---坐标轴名称样式
                        color: '#000',
                        padding: [5, 0, 0, -5] //---坐标轴名称相对位置
                    },
                    nameGap: 15, //---坐标轴名称与轴线之间的距离
                    nameRotate: 270, //---坐标轴名字旋转

                    axisLine: {
                        //---坐标轴 轴线
                        show: true, //---是否显示

                        //------------------- 箭头 -------------------------
                        symbol: ['none', 'arrow'], //---是否显示轴线箭头
                        symbolSize: [8, 8], //---箭头大小
                        symbolOffset: [0, 7], //---箭头位置

                        //------------------- 线 -------------------------
                        lineStyle: {
                            color: '#000',
                            width: 1,
                            type: 'solid'
                        }
                    },
                    axisTick: {
                        //---坐标轴 刻度
                        show: true, //---是否显示
                        inside: true, //---是否朝内
                        lengt: 3, //---长度
                        lineStyle: {
                            //color:'red',			//---默认取轴线的颜色
                            width: 1,
                            type: 'solid'
                        }
                    },
                    axisLabel: {
                        //---坐标轴 标签
                        show: true, //---是否显示
                        inside: false, //---是否朝内
                        rotate: 30, //---旋转角度
                        margin: 5, //---刻度标签与轴线之间的距离
                        color: '#909399', //---默认取轴线的颜色
                        fontSize: 12,
                        interval: 0,
                        formatter: function(value) {
                            if (value.length <= 5) {
                                return value;
                            } else {
                                return value.slice(0, 5) + '...';
                            }
                        }
                    },
                    splitLine: {
                        //---grid 区域中的分隔线
                        show: false, //---是否显示，'category'类目轴不显示，此时我的X轴为类目轴，splitLine属性是无意义的
                        lineStyle: {
                            color: '#eee',
                            width: 1,
                            type: 'dashed'
                        }
                    },
                    splitArea: {
                        //--网格区域
                        show: false //---是否显示，默认false
                    },
                    // data: [
                    //     '算什么男人',
                    //     '晴天',
                    //     '花海',
                    //     '夜曲',
                    //     '是不是这样的夜晚你才会这样的想起我',
                    //     '稻香',
                    //     '七里香',
                    //     '明明就',
                    //     '告白气球',
                    //     '听妈妈的话'
                    // ] //内容

                    data: this.surveyData.popularSong.map(item => item.songName)
                },

                //----------------------  y轴  ------------------------
                yAxis: {
                    show: true, //---是否显示
                    position: 'left', //---y轴位置
                    offset: 0, //---y轴相对于默认位置的偏移
                    type: 'value', //---轴类型，默认'category'
                    name: '总播放量', //---轴名称
                    nameLocation: 'end', //---轴名称相对位置value
                    // min: 'dataMin', //取最小值为最小刻度
                    // max: 'dataMax', //取最大值为最大刻度

                    min: Math.min(...this.surveyData.popularSong.map(item => item.grade)),
                    max: Math.max(...this.surveyData.popularSong.map(item => item.grade)),

                    scale: true, //自适应
                    minInterval: 0.1, //分割刻度
                    interval: 1000, //每次增加几个
                    nameTextStyle: {
                        //---坐标轴名称样式
                        color: '#000',
                        padding: [5, 0, 0, 5] //---坐标轴名称相对位置
                    },
                    nameGap: 15, //---坐标轴名称与轴线之间的距离
                    //nameRotate:270,			//---坐标轴名字旋转

                    axisLine: {
                        //---坐标轴 轴线
                        show: true, //---是否显示
                        //------------------- 箭头 -------------------------
                        symbol: ['none', 'arrow'], //---是否显示轴线箭头
                        symbolSize: [8, 8], //---箭头大小
                        symbolOffset: [0, 7], //---箭头位置

                        //------------------- 线 -------------------------
                        lineStyle: {
                            color: '#000',
                            width: 1,
                            type: 'solid'
                        }
                    },
                    axisTick: {
                        //---坐标轴 刻度
                        show: true, //---是否显示
                        inside: true, //---是否朝内
                        lengt: 3, //---长度
                        lineStyle: {
                            //color:'red',			//---默认取轴线的颜色
                            width: 1,
                            type: 'solid'
                        }
                    },
                    axisLabel: {
                        //---坐标轴 标签
                        show: true, //---是否显示
                        inside: false, //---是否朝内
                        rotate: 0, //---旋转角度
                        margin: 8, //---刻度标签与轴线之间的距离
                        color: '#909399', //---默认取轴线的颜色
                        fontSize: 12,
                        showMinLabel: true, //显示最小刻度线值
                        showMaxLabel: true //显示最大刻度线值
                    },
                    splitLine: {
                        //---grid 区域中的分隔线
                        show: true, //---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
                        lineStyle: {
                            color: '#999',
                            width: 1,
                            type: 'dashed' //---类型
                        }
                    },
                    splitArea: {
                        //--网格区域
                        show: false //---是否显示，默认false
                    }
                },

                //------------ 内容数据  -----------------
                series: [{
                    name: '销量', //---系列名称
                    // type: 'line', //---类型
                    type: 'bar', //---类型
                    legendHoverLink: true, //---是否启用图例 hover 时的联动高亮
                    label: {
                        //---图形上的文本标签
                        show: false,
                        position: 'insideTop', //---相对位置
                        rotate: 0, //---旋转角度
                        color: '#000'
                    },
                    itemStyle: {
                        //---图形形状
                        color: '#1296db',
                        barBorderRadius: [0, 0, 0, 0]
                    },
                    barWidth: '15', //---柱形宽度
                    barCategoryGap: '20%', //---柱形间距

                    // data: [3020, 4800, 3600, 6050, 4320, 6200, 5050, 7200, 4521, 6700]
                    data: this.surveyData.popularSong.map(item => item.grade)
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener('resize', () => {
                myChart.resize();
            });
        },
        // ====================================热门歌手top100========================================
        drawHotSinger() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('_singer'));
            // 指定图表的配置项和数据
            var option = {
                dataZoom: [{
                    id: 'dataZoomX',
                    type: 'slider',
                    xAxisIndex: [0],
                    filterMode: 'filter',
                    start: 0, //数据窗口范围的起始百分比0-100
                    // end: 9,
                    end: (1000 / this.surveyData.popularSinger.map(item => item.singerName).length) * 0.9,
                    bottom: 0 //距离底部的距离
                }, ],
                //--------------    标题 title  ----------------
                title: {
                    text: '热门歌手top100',
                    show: true,
                    x: 'center',
                    y: '15',
                    textStyle: {
                        //---主标题内容样式
                        color: '#000',
                        fontSize: 14,
                    }
                },
                //--------------   提示框 -----------------
                tooltip: {
                    show: true, //---是否显示提示框,默认为true
                    trigger: 'item', //---数据项图形触发
                    axisPointer: {
                        //---指示样式
                        type: 'shadow',
                        axis: 'auto'
                    },
                    padding: 5,
                    textStyle: {
                        //---提示框内容样式
                        color: '#909399',
                    }
                },

                //-------------  grid区域  ----------------
                grid: {
                    show: false, //---是否显示直角坐标系网格
                    top: 80, //---相对位置，top\bottom\left\right
                    bottom: 45,
                    containLabel: false, //---grid 区域是否包含坐标轴的刻度标签
                    tooltip: {
                        //---鼠标焦点放在图形上，产生的提示框
                        show: true,
                        trigger: 'item', //---触发类型
                        textStyle: {
                            color: '#909399',
                        }
                    }
                },

                //-------------   x轴   -------------------
                xAxis: {
                    show: true, //---是否显示
                    position: 'bottom', //---x轴位置
                    offset: 0, //---x轴相对于默认位置的偏移
                    type: 'category', //---轴类型，默认'category'
                    name: '歌手', //---轴名称
                    nameLocation: 'end', //---轴名称相对位置
                    // textStyle: {
                    //     fontSize: 15,
                    //     color: '#fff'
                    // },
                    nameTextStyle: {
                        //---坐标轴名称样式
                        color: '#000',

                        padding: [5, 0, 0, -5] //---坐标轴名称相对位置
                    },


                    nameGap: 15, //---坐标轴名称与轴线之间的距离
                    nameRotate: 270, //---坐标轴名字旋转

                    axisLine: {
                        //---坐标轴 轴线
                        show: true, //---是否显示

                        //------------------- 箭头 -------------------------
                        symbol: ['none', 'arrow'], //---是否显示轴线箭头
                        symbolSize: [8, 8], //---箭头大小
                        symbolOffset: [0, 7], //---箭头位置

                        //------------------- 线 -------------------------
                        lineStyle: {
                            color: '#000',
                            width: 1,
                            type: 'solid'
                        }
                    },
                    axisTick: {
                        //---坐标轴 刻度
                        show: true, //---是否显示
                        inside: true, //---是否朝内
                        lengt: 3, //---长度
                        lineStyle: {
                            //color:'red',			//---默认取轴线的颜色
                            width: 1,
                            type: 'solid'
                        }
                    },
                    axisLabel: {
                        //---坐标轴 标签
                        show: true, //---是否显示
                        inside: false, //---是否朝内
                        rotate: 30, //---旋转角度
                        margin: 5, //---刻度标签与轴线之间的距离
                        color: '#909399', //---默认取轴线的颜色
                        fontSize: 12,
                        interval: 0,
                        formatter: function(value) {
                            if (value.length <= 5) {
                                return value;
                            } else {
                                return value.slice(0, 5) + '...';
                            }
                        }
                    },
                    splitLine: {
                        //---grid 区域中的分隔线
                        show: false, //---是否显示，'category'类目轴不显示，此时我的X轴为类目轴，splitLine属性是无意义的
                        lineStyle: {
                            color: '#909399',
                            width: 1,
                            type: 'dashed'
                        }
                    },
                    splitArea: {
                        //--网格区域
                        show: false //---是否显示，默认false
                    },
                    // data: ['任然', '周杰伦', '李荣洁', '薛之谦', '张韶涵', '陈交迅', '林俊杰', '邓紫棋', '张艺兴', '吴亦凡'] //内容
                    data: this.surveyData.popularSinger.map(item => item.singerName)
                },

                //----------------------  y轴  ------------------------
                yAxis: {
                    show: true, //---是否显示
                    position: 'left', //---y轴位置
                    offset: 0, //---y轴相对于默认位置的偏移
                    type: 'value', //---轴类型，默认'category'
                    name: '总播放量', //---轴名称
                    nameLocation: 'end', //---轴名称相对位置value

                    // min: 'dataMin', //取最小值为最小刻度
                    // max: 'dataMax', //取最大值为最大刻度

                    min: Math.min(...this.surveyData.popularSinger.map(item => item.grade)),
                    max: Math.max(...this.surveyData.popularSinger.map(item => item.grade)),



                    scale: true, //自适应
                    minInterval: 0.1, //分割刻度
                    interval: 1000, //每次增加几个
                    nameTextStyle: {
                        //---坐标轴名称样式
                        color: '#000',
                        padding: [5, 0, 0, 5] //---坐标轴名称相对位置
                    },
                    nameGap: 15, //---坐标轴名称与轴线之间的距离
                    //nameRotate:270,			//---坐标轴名字旋转

                    axisLine: {
                        //---坐标轴 轴线
                        show: true, //---是否显示
                        //------------------- 箭头 -------------------------
                        symbol: ['none', 'arrow'], //---是否显示轴线箭头
                        symbolSize: [8, 8], //---箭头大小
                        symbolOffset: [0, 7], //---箭头位置

                        //------------------- 线 -------------------------
                        lineStyle: {
                            color: '#000',
                            width: 1,
                            type: 'solid'
                        }
                    },
                    axisTick: {
                        //---坐标轴 刻度
                        show: true, //---是否显示
                        inside: true, //---是否朝内
                        lengt: 3, //---长度
                        lineStyle: {
                            //color:'red',			//---默认取轴线的颜色
                            width: 1,
                            type: 'solid'
                        }
                    },
                    axisLabel: {
                        //---坐标轴 标签
                        show: true, //---是否显示
                        inside: false, //---是否朝内
                        rotate: 0, //---旋转角度
                        margin: 8, //---刻度标签与轴线之间的距离
                        color: '#909399', //---默认取轴线的颜色
                        fontSize: 12,
                        showMinLabel: true, //显示最小刻度线值
                        showMaxLabel: true //显示最大刻度线值
                    },
                    splitLine: {
                        //---grid 区域中的分隔线
                        show: true, //---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
                        lineStyle: {
                            color: '#999',
                            width: 1,
                            type: 'dashed' //---类型
                        }
                    },
                    splitArea: {
                        //--网格区域
                        show: false //---是否显示，默认false
                    }
                },

                //------------ 内容数据  -----------------
                series: [{
                    name: '销量', //---系列名称
                    // type: 'line', //---类型
                    type: 'bar', //---类型
                    legendHoverLink: true, //---是否启用图例 hover 时的联动高亮
                    label: {
                        //---图形上的文本标签
                        show: false,
                        position: 'insideTop', //---相对位置
                        rotate: 0, //---旋转角度
                        color: '#000'
                    },
                    itemStyle: {
                        //---图形形状
                        color: '#1296db',
                        barBorderRadius: [0, 0, 0, 0]
                    },
                    barWidth: '15', //---柱形宽度
                    barCategoryGap: '20%', //---柱形间距

                    // data: [3020, 4800, 3600, 6050, 4320, 6200, 5050, 7200, 4521, 6700]
                    data: this.surveyData.popularSinger.map(item => item.grade)
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener('resize', () => {
                myChart.resize();
            });
        },

        // ====================================入库趋势图========================================
        drawHistogram() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('_trend'));
            // 指定图表的配置项和数据
            var option = {
                dataZoom: [{
                    id: 'dataZoomX',
                    type: 'slider',
                    xAxisIndex: [0],
                    filterMode: 'filter',
                    start: 0, //数据窗口范围的起始百分比0-100
                    end: (1000 / this.surveyData.inboundTrends.map(item => item.date).length) * 0.9,
                    bottom: 0 //距离底部的距离
                }, ],
                //--------------    标题 title  ----------------
                title: {
                    text: '入库趋势图',
                    show: true,
                    x: 'center',
                    y: '15',
                    textStyle: {
                        //---主标题内容样式
                        color: '#000',
                        fontSize: 14,

                    }
                },
                //--------------   提示框 -----------------
                tooltip: {
                    show: true, //---是否显示提示框,默认为true
                    trigger: 'item', //---数据项图形触发
                    axisPointer: {
                        //---指示样式
                        type: 'shadow',
                        axis: 'auto'
                    },
                    padding: 5,
                    textStyle: {
                        //---提示框内容样式
                        color: '#909399',

                    }
                },

                //-------------  grid区域  ----------------
                grid: {
                    show: false, //---是否显示直角坐标系网格
                    top: 80, //---相对位置，top\bottom\left\right
                    bottom: 45,
                    containLabel: false, //---grid 区域是否包含坐标轴的刻度标签
                    tooltip: {
                        //---鼠标焦点放在图形上，产生的提示框
                        show: true,
                        trigger: 'item', //---触发类型
                        textStyle: {
                            color: '#909399',
                        }
                    }
                },

                //-------------   x轴   -------------------
                xAxis: {
                    show: true, //---是否显示
                    position: 'bottom', //---x轴位置
                    offset: 0, //---x轴相对于默认位置的偏移
                    type: 'category', //---轴类型，默认'category'
                    name: '月份', //---轴名称
                    nameLocation: 'end', //---轴名称相对位置
                    nameTextStyle: {
                        //---坐标轴名称样式
                        color: '#000',
                        padding: [5, 0, 0, -5] //---坐标轴名称相对位置
                    },
                    nameGap: 15, //---坐标轴名称与轴线之间的距离
                    nameRotate: 270, //---坐标轴名字旋转

                    axisLine: {
                        //---坐标轴 轴线
                        show: true, //---是否显示

                        //------------------- 箭头 -------------------------
                        symbol: ['none', 'arrow'], //---是否显示轴线箭头
                        symbolSize: [8, 8], //---箭头大小
                        symbolOffset: [0, 7], //---箭头位置

                        //------------------- 线 -------------------------
                        lineStyle: {
                            color: '#000',
                            width: 1,
                            type: 'solid'
                        }
                    },
                    axisTick: {
                        //---坐标轴 刻度
                        show: true, //---是否显示
                        inside: true, //---是否朝内
                        lengt: 3, //---长度
                        lineStyle: {
                            //color:'red',			//---默认取轴线的颜色
                            width: 1,
                            type: 'solid'
                        }
                    },
                    axisLabel: {
                        //---坐标轴 标签
                        show: true, //---是否显示
                        inside: false, //---是否朝内
                        rotate: 30, //---旋转角度
                        margin: 15, //---刻度标签与轴线之间的距离
                        color: '#909399', //---默认取轴线的颜色
                        fontSize: 10,
                        interval: 0
                    },
                    splitLine: {
                        //---grid 区域中的分隔线
                        show: false, //---是否显示，'category'类目轴不显示，此时我的X轴为类目轴，splitLine属性是无意义的
                        lineStyle: {
                            color: '#eee',
                            width: 1,
                            type: 'dashed'
                        }
                    },
                    splitArea: {
                        //--网格区域
                        show: false //---是否显示，默认false
                    },
                    // data: [
                    //     '7月1号',
                    //     '7月2号',
                    //     '7月3号',
                    //     '7月4号',
                    //     '7月5号',
                    //     '7月6号',
                    //     '7月7号',
                    //     '7月8号',
                    //     '7月9号',
                    //     '7月10号',
                    //     '7月11号',
                    //     '7月12号',
                    //     '7月13号',
                    //     '7月14号',
                    //     '7月15号',
                    //     '7月16号',
                    //     '7月17号',
                    //     '7月18号',
                    //     '7月19号',
                    //     '7月20号',
                    //     '7月21号',
                    //     '7月22号',
                    //     '7月23号',
                    //     '7月24号',
                    //     '7月25号',
                    //     '7月26号',
                    //     '7月27号',
                    //     '7月28号',
                    //     '7月29号',
                    //     '7月30号',
                    //     '7月31号'
                    // ] //内容

                    data: this.surveyData.inboundTrends.map(item => item.date)
                },

                //----------------------  y轴  ------------------------
                yAxis: {
                    show: true, //---是否显示
                    position: 'left', //---y轴位置
                    offset: 0, //---y轴相对于默认位置的偏移
                    type: 'value', //---轴类型，默认'category'
                    name: '数量', //---轴名称
                    nameLocation: 'end', //---轴名称相对位置value

                    // min: 'dataMin', //取最小值为最小刻度
                    // max: 'dataMax', //取最大值为最大刻度

                    min: Math.min(...this.surveyData.inboundTrends.map(item => item.count)),
                    max: Math.max(...this.surveyData.inboundTrends.map(item => item.count)),

                    scale: true, //自适应
                    minInterval: 0.1, //分割刻度
                    interval: 1000, //每次增加几个
                    nameTextStyle: {
                        //---坐标轴名称样式
                        color: '#000',
                        padding: [5, 0, 0, 5] //---坐标轴名称相对位置
                    },
                    nameGap: 15, //---坐标轴名称与轴线之间的距离
                    //nameRotate:270,			//---坐标轴名字旋转

                    axisLine: {
                        //---坐标轴 轴线
                        show: true, //---是否显示
                        //------------------- 箭头 -------------------------
                        symbol: ['none', 'arrow'], //---是否显示轴线箭头
                        symbolSize: [8, 8], //---箭头大小
                        symbolOffset: [0, 7], //---箭头位置

                        //------------------- 线 -------------------------
                        lineStyle: {
                            color: '#000',
                            width: 1,
                            type: 'solid'
                        }
                    },
                    axisTick: {
                        //---坐标轴 刻度
                        show: true, //---是否显示
                        inside: true, //---是否朝内
                        lengt: 3, //---长度
                        lineStyle: {
                            //color:'red',			//---默认取轴线的颜色
                            width: 1,
                            type: 'solid'
                        }
                    },
                    axisLabel: {
                        //---坐标轴 标签
                        show: true, //---是否显示
                        inside: false, //---是否朝内
                        rotate: 0, //---旋转角度
                        margin: 8, //---刻度标签与轴线之间的距离
                        color: '#909399', //---默认取轴线的颜色
                        fontSize: 12,
                        showMinLabel: true, //显示最小刻度线值
                        showMaxLabel: true //显示最大刻度线值
                    },
                    splitLine: {
                        //---grid 区域中的分隔线
                        show: true, //---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
                        lineStyle: {
                            color: '#999',
                            width: 1,
                            type: 'dashed' //---类型
                        }
                    },
                    splitArea: {
                        //--网格区域
                        show: false //---是否显示，默认false
                    }
                },

                //------------ 内容数据  -----------------
                series: [{
                    name: '销量', //---系列名称
                    type: 'line', //---类型
                    smooth: true,
                    // type: 'bar', //---类型
                    legendHoverLink: true, //---是否启用图例 hover 时的联动高亮
                    label: {
                        //---图形上的文本标签
                        show: true,
                        position: 'insideTop', //---相对位置
                        rotate: 0, //---旋转角度
                        color: '#909399'
                    },
                    itemStyle: {
                        //---图形形状
                        color: '#1296db',
                        barBorderRadius: [0, 0, 0, 0]
                    },
                    barWidth: '15', //---柱形宽度
                    barCategoryGap: '20%', //---柱形间距
                    // data: [
                    //     3020,
                    //     4800,
                    //     3600,
                    //     6050,
                    //     4320,
                    //     6200,
                    //     5050,
                    //     7200,
                    //     4521,
                    //     6700,
                    //     7000,
                    //     5020,
                    //     4521,
                    //     6700,
                    //     7000,
                    //     5020,
                    //     4521,
                    //     6700,
                    //     7000,
                    //     5020,
                    //     7000,
                    //     5020,
                    //     4521,
                    //     6700,
                    //     7000,
                    //     5020,
                    //     7000,
                    //     5020,
                    //     4521,
                    //     6700,
                    //     7000
                    // ]
                    data: this.surveyData.inboundTrends.map(item => item.count)
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener('resize', () => {
                myChart.resize();
            });
        },

        // ====================================CP曲库占比========================================
        drawPie() {
            var myChart = echarts.init(document.getElementById('main'));
            //init初始化接口，返回ECharts实例，其中dom为图表所在节点
            var option = {
                //标题
                title: {
                    text: 'CP曲库占比',
                    link: '', //主标题文本超链接,默认值true
                    target: null,
                    show: true,
                    x: 'center',
                    y: '15',

                    textStyle: {
                        fontSize: 14,
                        fontStyle: 'normal',
                        fontWeight: 'bolder',
                        color: '#000',
                    }
                },
                //提示框，鼠标悬浮交互时的信息提示
                tooltip: {
                    trigger: 'item',
                    // formatter: '{a} <br/>{b} : {c} ({d}%)' // 其他 : 0.0001 (0.01%)
                    formatter: '{a} <br/>{b}:{d}%'
                }, //图例，每个图表最多仅有一个图例
                legend: {
                    orient: 'horizontal',
                    left: 'center',
                    // bottom: 'bottom',
                    textStyle: {
                        //图例文字的样式
                        color: '#909399',
                        fontSize: 10
                    },
                    itemWidth: 5,
                    itemHeight: 5,
                    itemGap: 5,
                    right: 10,
                    // top: 20,
                    bottom: 10,
                    // data: ['第一部分', '第二部分', '第三部分', '第四部分']
                    data: this.dataFormat_(this.surveyData.cpProportion),
                    tooltip: {
                        show: true,
                    },
                    formatter: function(name) {
                        return name.length <= 3 ? name : name.slice(0, 3) + '...'
                    },
                }, // 系列列表,每个系列通过 type 决定自己的图表类型
                series: [{
                    name: '详情',
                    type: 'pie',
                    radius: '60%',
                    center: ['50%', '50%'],
                    minAngle: '15',
                    // data: [
                    //     { name: '第一部分', value: 4 },
                    //     { name: '第二部分', value: 7 },
                    //     { name: '第三部分', value: 3 },
                    //     { name: '第四部分', value: 1 }
                    // ],
                    data: this.dataFormat(this.surveyData.cpProportion),
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'outer',
                                fontSize: 10,
                                fontWeight: 'bold',
                                align: "left",
                                formatter: '{d}%',
                                padding: [0, -2],
                                color: '#909399'
                            },
                            labelLine: { //指示线状态
                                show: true,
                                smooth: 0.2,
                                length: 6,
                                length2: 4
                            }
                        },
                        //选中效果
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                            label: {
                                show: true,
                                // formatter: '{b}:{d}%',
                                formatter: '{d}%',
                                fontSize: '10',
                                padding: [0, 0, 0, 0],
                                fontWeight: 'bold',
                                color: '#000'
                            }
                        }
                    }

                }],

            };

            myChart.on('legendselectchanged', function(params) {
                var option = this.getOption();
                console.log(option)
                option.legend[0].selected[params.name] = true; //相当于取消点击事件
                this.setOption(option)
            })

            myChart.setOption(option); // 为echarts对象加载数据
            window.addEventListener('resize', () => {
                myChart.resize();
            });
        },
        // ============================================================================
        handleSwitch(n, name) {
            // this.cards = [...this.cards];
            console.log(this.cards)
            for (var i = 0; i < this.cards.length; i++) {
                this.cards[i] = false;
            }
            this.cards[n] = true;
            // this.cards = [...this.cards];
            this.SET_CARDS([...this.cards]);

            if (n == 0) {
                this.drawAll()
            } else if (n === 1) {
                // 运营概况
                // OperationData
                if (this.top300SongListData.length === 0) {
                    this.getTop300SongListData()
                }

                if (this.top10000SongsData.length === 0) {
                    this.getTop10000SongsData()
                }

            } else if (n === 2) {
                // 审核概况
                if (this.auditOverviewData.length === 0) {
                    // 歌单审核概况
                    this.getAuditOverviewData()
                }
                if (this.auditOverviewData_.length === 0) {
                    // 曲库审核概况
                    this.getAuditOverviewData_()
                }
            } else if (n === 3) {
                // 工作日志
                if (this.workLogData.length === 0) {
                    this.getWorkLogData()
                }
            } else if (n === 4) {
                // 用户反馈
                // userFeedback
                if (this.userFeedBackData.length === 0) {
                    this.getUserFeedBackData()
                }
            }
            this.$setActiveTag.call(this, name)
        },
    }
}